<template>
	<view class="px-25 border-top">
		<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">区域</view>
			<view class="font32 color333">
				<picker mode="multiSelector" :range="newProvinceDataList" :value="multiIndex" @change="pickerChange"
					@columnchange="pickerColumnchange">
					<view class="uni-input font30 color666">{{select}}</view>
				</picker>
			</view>
		</view>
		<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">学校</view>
			<view class="font32 color333">
				<picker @change="pickerSchool" :value="schoolIndex" :range="schoolArray" range-key="name">
					<view class="uni-input font30 color666">{{ schoolArray[schoolIndex].name }}</view>
				</picker>
			</view>
		</view>

		<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">年级</view>
			<view class="font32 color333">
				<picker @change="pickerGrade" :value="gradeIndex" :range="gradeArray" range-key="name">
					<view class="uni-input font30 color666">{{ gradeArray[gradeIndex].name }}</view>
				</picker>
			</view>
		</view>
		<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">班级</view>
			<view class="font32 color333">
				<picker @change="pickerClass" :value="classIndex" :range="classArray" range-key="name">
					<view class="uni-input font30 color666">{{ classArray[classIndex].name }}</view>
				</picker>
			</view>
		</view>

		<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">设备码</view>
			<view class="font32 color333 flex align-center">
				<input type="text" :value="result" @input="reKeyInput" class="text-right" placeholder="请输入设备码"
					style="width: 92%;"></input>
				<!-- #ifdef MP-WEIXIN -->
				<image src="../../static/img/saoma.png" @click="scanCode" class="ml-2"
					style="width: 50rpx;height: 50rpx;width: 92%" mode=""></image>
				<!-- #endif -->
			</view>
		</view>

		<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">学生信息</view>
			<view class="font32 color333">
				<picker @change="pickerType" :value="typeIndex" :range="typeArray" range-key="text">
					<view class="uni-input font30 color666">{{ typeArray[typeIndex]}}</view>
				</picker>
			</view>
		</view>

		<view v-if="typeIndex==0" class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">学生名称</view>
			<view class="font32 color333"><input type="text" @input="nameKeyInput" @blur="testName" value="" class="text-right"
					style="width: 92%;" placeholder="请输入学生名称" /></view>
		</view>
		<view v-if="typeIndex==0" class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">性别</view>
			<view class="font32 color333">
				<picker @change="pickerSex" :value="sexIndex" :range="sexArray" range-key="text">
					<view class="uni-input font30 color666">{{ sexArray[sexIndex].text }}</view>
				</picker>
			</view>
		</view>
		<view v-if="typeIndex==0" class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">跑校</view>
			<view class="font32 color333">
				<picker @change="pickerRun" :value="runIndex" :range="runSchool" range-key="text">
					<view class="uni-input font30 color666">{{ runSchool[runIndex].text }}</view>
				</picker>
			</view>
		</view>
		<view v-if="typeIndex==1" class="flex justify-between align-center border-bottom" style="height: 90rpx;">
			<view class="font32 color333">学生</view>
			<view class="font32 color333">
				<picker @change="pickerStudent" :value="studentIndex" :range="studentArray" range-key="vcName">
					<view class="uni-input font30 color666">{{ studentArray[studentIndex].vcName }}</view>
				</picker>
			</view>
		</view>
		<view class="px-2 mt-5">
			<main-button @click="bindDevice">提交</main-button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import mainButton from '../../components/common/main-buttom.vue';
	export default {
		components: {
			mainButton
		},
		computed: mapState(['userInfo']),
		data() {
			return {
				// code:'860009040223380',
				schoolArray: [{
					name: '请先选择学校',
					id: ''
				}],
				gradeArray: [{
					name: '请先选择年级',
					id: ''
				}],
				classArray: [{
					name: '请先选择班级',
					id: ''
				}],
				sexArray: [{
					text: '请选择性别',
					id: '-1'
				}, {
					text: '男',
					id: '0'
				}, {
					text: '女',
					id: '1'
				}],
				schoolIndex: 0,
				gradeIndex: 0,
				classIndex: 0,
				imei: '',
				sexIndex: 0,
				schoolId: 0,
				gradeId: 0,
				classId: 0,
				sexId: 0,
				studentId: 0,
				result: '',
				userName: '',
				code: '',
				studentArray: [{
					vcName: '请选择学生',
					longId: '0'
				}],
				studentIndex: 0,
				runSchool: [{
					text: '住校',
					id: '1'
				}, {
					text: '跑校',
					id: '1'
				}],
				runId: 1,
				runIndex: 0,
				typeArray: ['手动输入学生信息', '选择已有学生信息'],
				typeIndex: 0,
				oldpProvinceDataList: [],
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '请先选择地区',
				addressData: {
					name: '',
					phone: '',
					address: ''
				},
				binhao: '1'
			};
		},
		onLoad() {
			this.getAreas();
		},
		methods: {
			yearChange: function(e) {
				console.log(e)
				//获得对象的 detail的 value
				//通过数组的下标改变显示在页面的值
				this.yearsIndex1 = e.detail.value[0];
				this.yearsIndex2 = e.detail.value[1];
			},
			nameKeyInput(event) {
				this.userName = event.target.value;
			},
			testName(){
				let this_=this;
				this_.studentArray.forEach((item)=>{
					if(item.vcName==this_.userName){
						uni.showModal({
							title: '',
							content: '本班级已存在此名字信息，请您进行核对确认',
							confirmText: '查看已有学生',
							success: function (res) {
								if (res.confirm) {
									console.log('testinit')
									this_.userName='';
									this_.typeIndex=1
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},
			codeKeyInput(event) {
				this.code = event.target.value;
			},
			reKeyInput(event) {
				this.result = event.target.value;
			},
			pickerSchool(e) {
				this.schoolIndex = e.target.value;
				this.schoolId = this.schoolArray[e.target.value].id;
				this.gradeId = 0
				this.classId = 0;
				this.getGrade();
			},
			pickerRun(e) {
				this.runIndex = e.target.value
				this.runId = this.runSchool[e.target.value].id
			},
			pickerType(e) {
				this.typeIndex = e.target.value;
			},
			pickerGrade(e) {
				this.gradeIndex = e.target.value;
				this.gradeId = this.gradeArray[e.target.value].id;
				this.classId = 0;
				this.getClass();
			},
			pickerClass(e) {
				this.classIndex = e.target.value;
				this.classId = this.classArray[e.target.value].id;
				this.getStudent();
			},
			pickerSex(e) {
				this.sexIndex = e.target.value;
				this.sexId = this.sexArray[e.target.value].id;
			},
			pickerStudent(e) {
				this.studentIndex = e.target.value;
				this.studentId = this.studentArray[e.target.value].longId;
			},
			scanCode() {
				uni.scanCode({
					success: res => {
						this.result = res.result;
					},
					fail: err => {
						uni.getSetting({
							success: res => {
								let authStatus = res.authSetting['scope.camera'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要使用您的相机，请在设置界面打开相关权限',
										success: res => {
											if (res.confirm) {
												uni.openSetting();
											}
										}
									});
								}
							}
						});
					}
				});
			},
			getAreas() {
				let _this = this;
				let opts = {
					url: 'Jz/SearchSFXX.shtml'
				};
				let param = {};
				_this.$http.httpTokenRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							this.oldpProvinceDataList = res.data.data;
							for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
								this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].vcName);
							}
							for (let i = 0; i < this.oldpProvinceDataList[0].Slist.length; i++) {
								// console.log(this.oldpProvinceDataList[0].city[i].name)
								this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].Slist[i].vcName);
							}
							for (let i = 0; i < this.oldpProvinceDataList[0].Slist[0].Qlist.length; i++) {
								// console.log(this.oldpProvinceDataList[0].city[0].area)
								this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].Slist[0].Qlist[i]
									.vcName);
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				console.log(this.multiIndex)
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]]}--${this.newProvinceDataList[1][this.multiIndex[1]]}--${this.newProvinceDataList[2][this.multiIndex[2]]}`
				this.getSchool();
			},
			pickerColumnchange(e) {
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					console.log(this.multiIndex[0])
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].Slist.map((item,
						index) => {
						console.log(item)
						return item.vcName
					})
					// console.log(this.multiIndex)
					if (this.oldpProvinceDataList[this.multiIndex[0]].Slist.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].Slist[0].Qlist.map((
							item, index) => {
							// console.log(item)
							return item.vcName
						})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].Slist[this.multiIndex[
							1]].Qlist.map((item, index) => {
							// console.log(item)
							return item.vcName
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].Slist[this.multiIndex[1]]
						.Qlist.map((item, index) => {
							// console.log(item)
							return item.vcName
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},
			getSchool() {
				let _this = this;
				let opts = {
					url: 'Jz/SearchByQuXx.shtml'
				};
				let param = {
					longAreaId: _this.oldpProvinceDataList[_this.multiIndex[0]].Slist[_this.multiIndex[1]].Qlist[_this
						.multiIndex[2]].longId,
					type: 1
				};
				_this.$http.httpTokenRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							_this.schoolArray = res.data.data;
							_this.schoolArray.unshift({
								id: 0,
								name: "请先选择学校"
							});
							_this.schoolId = 0;
							//_this.schoolId = res.data.data[0].id;

						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			getGrade() {
				let _this = this;
				let opts = {
					url: 'XxAndNjAndBj.shtml'
				};
				let param = {
					longXxglId: _this.schoolId,
					leave: 2
				};
				_this.$http.httpTokenRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							_this.gradeArray = res.data.data;
							_this.gradeArray.unshift({
								id: 0,
								name: "请先选择年级"
							});
							_this.gradeId = 0;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			getClass() {
				let _this = this;
				let opts = {
					url: 'XxAndNjAndBj.shtml'
				};
				let param = {
					leave: 3,
					longXxglId: _this.schoolId,
					longNjId: _this.gradeId
				};
				_this.$http.httpTokenRequest(opts, param).then(
					res => {
						console.log(1);
						console.log(res.data);
						if (res.data.code == '200') {
							_this.classArray = res.data.data;
							_this.classArray.unshift({
								id: 0,
								name: "请先选择班级"
							});
							_this.classId = 0;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			getStudent() {
				let _this = this;
				let opts = {
					url: 'GetXsList.shtml'
				};
				let param = {
					bj_code: _this.classId
				};
				_this.$http.httpTokenRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							_this.studentArray = res.data.data;
							_this.studentArray.unshift({
								longId: 0,
								vcName: "请先选择学生"
							});
							_this.studentId = 0
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			// 绑定设备
			bindDevice() {
				let _this = this;
				if (_this.schoolId == 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择学校"
					});
					return
				}
				if (_this.gradeId == 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择年级"
					});
					return
				}
				if (_this.classId == 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择班级"
					});
					return
				}
				if (!_this.result) {
					uni.showToast({
						icon: 'none',
						title: "请输入设备IMEI号"
					});
					return
				}
				let opts = {
					url: 'Bind.shtml'
				};
				let param = {
					IMEI: _this.result,
					userId: uni.getStorageSync('userInfo').userId,
					authToken: uni.getStorageSync('userInfo').token,
					longXxglId: _this.schoolId,
					longNjId: _this.gradeId,
					longBjId: _this.classId,
					xsId: _this.studentId,
					vcSex: _this.sexId,
					vcName: _this.userName,
					vcXh: _this.code,
					intType: _this.runIndex,
				};
				_this.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							uni.showToast({
								icon: 'success',
								title: res.data.msg
							});
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			}
		}
	};
</script>
